<!--  -->
<template>
  <div class='List-body'>
    <div class="List-all">
      <div class="list-top">
        <div class="left" @click="back"></div>
        <div class="middle-year" @click="showYearBlock">
            <div class="middle-date">{{ now_year }}-{{ now_year+1 }}学年综合评测</div>
            <div class="middle-icon">
                <div class="triangle-down"></div>
            </div>
        </div>
        <div class="right">{{ yearScore.toFixed(2) }}</div>
      </div>
      <div class="list-main">
          <div class="List-big">
            <div class="big__name">德育评测</div>
            <div class="big__score">{{getbig_score(this.CheckTable.firstList).toFixed(2)}}</div>
          </div>
          <div class="List-detail-item" v-for="(item, index1) in this.CheckTable.firstList" :key="index1">
            <div class="item__left">
              <div class="item__index">{{index1+1}}</div>
              <div class="item__title" @click="clickCheckItem(item)">{{item.title}}</div>
            </div>
            <div class="item__score">{{item.mark}}</div>
          </div>
          <div class="List-big">
            <div class="big__name">智育评测</div>
            <div class="big__score">{{getbig_score(this.CheckTable.secondList).toFixed(2)}}</div>
          </div>
          <div class="List-detail-item" v-for="(item, index2) in this.CheckTable.secondList" :key="'info2-'+index2">
            <div class="item__left">
              <div class="item__index">{{index2+1}}</div>
              <div class="item__title" @click="clickCheckItem(item)">{{item.title}}</div>
            </div>
            <div class="item__score">{{item.mark}}</div>
          </div>
          <div class="List-big">
            <div class="big__name">体育评测</div>
            <div class="big__score">{{getbig_score(this.CheckTable.thirdList).toFixed(2)}}</div>
          </div>
          <div class="List-detail-item" v-for="(item, index3) in this.CheckTable.thirdList" :key="'info3-'+index3">
            <div class="item__left">
              <div class="item__index">{{index3+1}}</div>
              <div class="item__title" @click="clickCheckItem(item)">{{item.title}}</div>
            </div>
            <div class="item__score">{{item.mark}}</div>
          </div>
      </div>
    </div>
    <div class="Block-body" v-if="isChoosingYear">
      <div class="yearsBlock">
            <div class="year" v-for="(item, index) in yearsList" :key="index" @click="chooseyear(index)">
                <div class="radius" :class="{radius_active: index===now_index}"></div>
                <div class="text" :class="{text_active: index===now_index}">{{item}}-{{item+1}}学年综合评测</div>
            </div>
        </div>
    </div>
    <div class="Block-body" v-if="isCheckItem">
      <div class="checkitem-main">
      <div class="show">
        <div class="title">加分依据</div>
        <div class="detail">{{rule}}</div>
      </div>
      <div class="bottom">
        <div class="button" @click="clockCheckItem">确定</div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import studentService from '../../../service/student'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      isCheckItem: false,
      isChoosingYear: false,
      now_index: 0,
      yearsList: [],
      CheckTable: {},
      yearScore: 0,
      show_item: null,
      rule: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {
    now_year () {
      if (this.yearsList.length > 0) {
        return this.yearsList[this.now_index]
      } else {
        return 0
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getYearsList () {
      let student = this.$store.state.Student
      let result = await studentService.getYearsList(student.studentid)
      return result
    },
    async getCheckTable () {
      let student = this.$store.state.Student
      let result =
        await studentService
          .getCheckTable(student.realname, student.studentid,
            student.collegename, this.yearsList[this.now_index])
      return result
    },
    getyearScore () {
      var score = 0
      if (this.CheckTable == null) {
        return score
      }
      for (var i = 0; i < this.CheckTable.firstList.length; i++) {
        score += this.CheckTable.firstList[i].mark
      }
      for (i = 0; i < this.CheckTable.secondList.length; i++) {
        score += this.CheckTable.secondList[i].mark
      }
      for (i = 0; i < this.CheckTable.thirdList.length; i++) {
        score += this.CheckTable.thirdList[i].mark
      }
      score.toFixed(2)
      // console.log(score)
      return score
    },
    async getMineShow () {
      let result = await this.getYearsList()
      this.yearsList = result
      this.getCheckTable()
        .then(value => this.CheckTable = value)
        .then(() => {
          this.yearScore = this.getyearScore()
        })
    },
    async getRule () {
      let result = await this.$axios({
        // url: '/student/rule',
        // cloud 端口变更————》rule模块
        url: '/studentevaluation/api/rules/detail',
        data: this.show_item,
        method: 'post'
      })
      console.log(result)
      return result.data
    },
    getbig_score (big) {
      var score = 0
      if (big == null) {
        return 0
      }
      for (var index = 0; index < big.length; index++) {
        score += big[index].mark
      }
      return score
    },
    showYearBlock () {
      this.isChoosingYear = true
    },
    async chooseyear (index) {
      this.now_index = index
      this.getCheckTable()
        .then(value => this.CheckTable = value)
        .then(() => {
          this.yearScore = this.getyearScore()
        })
      this.isChoosingYear = false
    },
    back () {
      this.$emit('closeDetail')
    },
    async clickCheckItem (item) {
      this.show_item = item
      this.rule = await this.getRule()
      this.isCheckItem = true
    },
    clockCheckItem () {
      this.isCheckItem = false
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getMineShow()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.List-body {
  position: fixed;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family:PingFang SC;
  background-color: #fff;
  .List-all {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    // overflow: hidden;
    flex-direction: column;
    .list-top {
      width: 100%;
      height:px2rem(44);
      background:rgba(2,164,237,1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        margin-left: px2rem(13);
        height: px2rem(44);
        width: px2rem(46);
        background-image: url('../../../assets/img/icon/list-back.png');
        background-size: 100% 100%;
      }
      .middle-year {
          width: px2rem(219);
          height: px2rem(32);
          background-color: #fff;
          border-radius: px2rem(6);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .middle-date {
              margin-left: px2rem(19);
              height: 100%;
              font-size:px2rem(14);
              font-family:PingFang SC;
              font-weight:400;
              line-height:px2rem(32);
              color:rgba(2,164,237,1);
              overflow: hidden;
          }
          .middle-icon {
              width: 0;
              height: 0;
              border-left: px2rem(7) solid transparent;
              border-right: px2rem(7) solid transparent;
              border-bottom: 0;
              border-top: px2rem(7) solid rgba(2,164,237,1);
              margin: 0 px2rem(18);
              margin-left: 0;

          }
      }
      .right {
        width: px2rem(51);
        height: px2rem(44);
        margin-right: px2rem(15);
        font-size:px2rem(22);
        font-family:SF UI Text;
        font-weight:800;
        line-height:px2rem(44);
        color:rgba(255,255,255,1);
        text-align: center;
      }
    }
    .list-main {
      width: 100%;
      height: calc(100% - #{px2rem(44)});
      // background-color: #000;
      overflow: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .List-big {
        width: px2rem(349);
        height: px2rem(38) !important;
        flex-shrink: 0;
        border-bottom: px2rem(1) solid rgba(219,219,219,1);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .big__name {
          width:px2rem(80);
          height:100%;
          margin-left: px2rem(34);
          font-size:px2rem(18);
          font-family:PingFang SC;
          font-weight:bold;
          line-height:px2rem(38);
          color:rgba(2,164,237,1);
        }
        .big__score {
          width:px2rem(53);
          height:100%;
          font-size:px2rem(16);
          font-family:SF UI Text;
          font-weight:800;
          line-height:px2rem(38);
          color:rgba(2,164,237,1);
        }
      }
      .List-detail-item {
        width: px2rem(349);
        height: px2rem(38);
        border-bottom: px2rem(1) solid rgba(219,219,219,1);
        // position: relative;
        .item__left {
          width: calc(100% - #{px2rem(53)});
          float: left;
          // overflow: hidden;
          height: px2rem(38);
          // background-color: #000;
          .item__index {
            margin: 0;
            width: px2rem(34);
            height:px2rem(38);
            font-size:px2rem(14);
            font-family:SF Pro Text;
            text-align: center;
            font-weight:bold;
            line-height:px2rem(38);
            float: left;
            color:rgba(252,105,133,1);
          }
          .item__title {
            height: px2rem(38);
            float: left;
            width: px2rem(200);
            font-size:px2rem(14);
            font-family:PingFang SC;
            font-weight:400;
            line-height:px2rem(38);
            color:rgba(38,38,38,1);
            overflow: auto;
            white-space: nowrap;
          }
        }
        .item__score {
          float: right;
          width:px2rem(53);
          height:px2rem(38);
          font-size:px2rem(16);
          font-family:SF UI Text;
          font-weight:800;
          line-height:px2rem(38);
          color:rgba(38,38,38,1);
        }
      }
    }
  }
  .Block-body {
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(38,38,38,0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    .yearsBlock {
      position: absolute;
      width: px2rem(258);
      height: px2rem(192);
      border-radius: px2rem(31);
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      overflow: auto;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .year {
        width: px2rem(200);
        height: px2rem(22);
        margin-top: px2rem(7);
        margin-bottom: px2rem(7);
        display: flex;
        justify-content: space-between;
        // background-color: black;
      .radius {
            width: px2rem(18);
            height: px2rem(18);
            border: px2rem(2) solid rgba(188,191,196,1);
            border-radius:50%;
        }
        .radius_active{
            width: px2rem(10);
            height: px2rem(10);
            border: px2rem(6) solid rgba(2,164,237,1);
        }
        .text {
            width: px2rem(160);
            height: px2rem(20);
            font-size:px2rem(14);
            font-family:PingFang SC;
            font-weight:400;
            line-height:px2rem(20);
            color:rgba(188,191,196,1);
        }
        .text_active {
            color:rgba(2,164,237,1);
        }
      }
    }
    .checkitem-main {
      width: px2rem(332);
      height: px2rem(149);
      background-color: #fff;
      border-radius: px2rem(31);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .show {
        height: px2rem(59);
        width: px2rem(270);
        margin-top: px2rem(18);
        font-family:PingFang SC;
        .title {
          height: px2rem(25);
          width: 100%;
          margin-bottom: px2rem(9);
          font-size:px2rem(18);
          font-weight:bold;
          line-height:px2rem(25);
          color:rgba(38,38,38,1);
        }
        .detail {
            width:100%;
            height:px2rem(25);
            font-size:px2rem(18);
            font-family:PingFang SC;
            font-weight:400;
            line-height:px2rem(25);
            color:rgba(130,130,130,1);
            overflow: auto;
            white-space: nowrap;
        }
      }
      .bottom {
        width: px2rem(270);
        height: px2rem(44);
        margin-bottom: px2rem(12);
        display: flex;
        flex-direction: row-reverse;
        .button {
          height: px2rem(44);
          width: px2rem(80);
          border-radius: px2rem(22);
          font-size:px2rem(18);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(44);
          text-align: center;
          color:rgba(255,255,255,1);
          background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Firefox 3.6 - 15 */
          background: linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* 标准的语法 */
        }
      }
    }
  }
}
</style>
